<template>
  <div class="login-container">
    <div class="login">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="登录" name="first">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="10px" class="demo-ruleForm">
            <el-form-item prop="name">
              <el-input size="large" prefix-icon="el-icon-s-custom" v-model="ruleForm.name">
                <template slot="prepend">名称</template>
              </el-input>
            </el-form-item>
            <el-form-item prop="pass">
              <el-input prefix-icon="el-icon-more" type="password" v-model="ruleForm.pass" auto-complete="off">
                <template slot="prepend">密码</template>
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @keyup.enter="submitForm('ruleForm')" @click="submitForm('ruleForm')">登录
              </el-button>

              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="second">
          <register></register>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import register from '@/components/login/register';

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }

        callback();
      }
    };
    return {
      items: 800,
      ww: 800,
      activeName: 'first',
      oo: '0',
      ruleForm: {
        name: '',
        pass: '',
        checkPass: ''
      },
      rules: {
        name: [{required: true, message: '请输入您的名称', trigger: 'blur'}, {
          min: 2,
          max: 10,
          message: '长度在 2 到 10 个字符',
          trigger: 'blur'
        }],
        pass: [{required: true, validator: validatePass, trigger: 'blur'}]
      }
    };
  },
  mounted() {
    this.$refs.nm.forEach(qq => {
      const aa = 0.8 + (Math.random())
      const cc = this.ww + (Math.random() * 40)
      console.log(Math.random())
      qq.style.transformOrigin = `0 0 ${cc}px`
      qq.style.transform = `translate3d(0, 0, -${cc}px) rotateY(${(Math.random() * 310)}deg) rotateX(${(Math.random() * -60)}deg) scale(${aa})`
    })
  },
  methods: {
    //选项卡切换
    handleClick(tab, event) {
    },
    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //提交表单
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios({
            url: '/api/User/selectsUser',
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'//普通表单提交的Content-Type
            },
            transformRequest: [data => {
              let formData = new FormData()
              formData.append("username", this.ruleForm.name)
              formData.append("password", this.ruleForm.pass)
              return formData
            }],
          }).then(res => {

            if (res.data === 1) {
              this.$message.success("登录成功")
              this.$router.push({path: '/index', query: {userId: this.ruleForm.name, role: '1'}});
              console.log(res)
            } else if (res.data != 1) {
              this.$message.success("登录成功")
              this.$router.push({path: '/indexcustomer', query: {userId: this.ruleForm.name, role: this.oo}});
            } else {
              this.$message.error(res.data.message)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      });
    }
  },
  components: {
    register
  }
};
</script>

<style lang="css">

.login-container {

  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -20%);
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-image: url("../bg7.jpg");
  background-repeat: no-repeat;
  overflow: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.lome {
  position: relative;
  width: 100%;
  height: 750px;

  background: radial-gradient(260% 67% at bottom center, #034889ea 10%, #809702b5 40%, #00838F 65%, #263238 130%);

  overflow: hidden;
}

.mn {
  position: absolute;
  left: 50%;
  transform-style: preserve-3d;
  /*transition: perspective(5000deg);*/
  perspective-origin: 150% 90%;
  -webkit-perspective-origin: 150% 90%;
  -moz-perspective-origin: 150% 90%;
  animation: anim 40s linear infinite;
  bottom: -110px;
}

.nm {
  width: 1px;
  height: 2px;
  background: #6dd5f7;
  position: absolute;
  top: 0;
  left: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}

@keyframes anim {
  0% {
    transform: perspective(5px) rotateZ(10deg) rotateX(-50deg) rotateY(0deg);
  }

  100% {
    transform: perspective(10px) rotateZ(10deg) rotateX(-5deg) rotateY(460deg);
  }
}

.login {
  width: 350px;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.6);
  padding: 30px;
  border-radius: 20px;

}

.title-zc {
  text-align: center;
  color: black;
  margin-top: 5%;
}

</style>